<template>
  <div class="flex_js p_0_20 bg_fff" v-if="show_tabs">
    <div class="flex1" style="overflow: auto" @wheel="handleScroll($event)">
      <div class="flex">
        <div
          v-for="(item, index) in tabs_list"
          :key="index"
          class="tab_item"
          style="height: 32px; cursor: pointer"
          :class="tabs_listValue == item.name ? 'choose_tab' : ''"
          @click.stop="selectTabs(item)"
        >
          <div class="flex p_0_15">
            <span style="white-space: nowrap">{{ item.label }}</span>
            <img
              v-show="item.name != 'index'"
              @click.stop="removeTab(item.name)"
              :src="item.close_icon"
              style="
                width: 12px;
                height: 12px;
                margin-left: 10px;
                border-radius: 50%;
              "
              @mouseenter="change_tab_close_icon({ index: index, type: 1 })"
              @mouseleave="change_tab_close_icon({ index: index, type: 2 })"
              alt=""
            />
          </div>
          <div
            style="
              width: 1px;
              height: 15px;
              background-color: #d8d8d8;
              margin-right: -1px;
            "
            v-show="tabs_listValue != item.name"
          ></div>
        </div>
      </div>
    </div>
    <div class="flex p_left20" style="flex-shrink: 0">
      <el-dropdown>
        <svgBtn
          style="
            font-size: 14px !important;
            padding: 5px;
            margin: 0 5px;
            border-radius: 3px;
            height: 14px;
            line-height: 14px;
          "
          :style="{
            backgroundColor: svg_color_list[1] == '#3580eb' ? '#ECF4FF' : '',
          }"
          :color="svg_color_list[1]"
          @mouseenter="svg_color_list[1] = '#3580eb'"
          @mouseleave="svg_color_list[1] = '#999'"
          icon="select_tabs"
        ></svgBtn>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              @click="close_tab(1)"
              :style="{ color: close_status.close_1 ? '' : '#999' }"
            >
              <svgBtn
                icon="tabs_close_1"
                :color="close_status.close_1 ? '#999' : '#999'"
                style="font-size: 14px; margin-right: 10px"
              ></svgBtn>
              关闭标签页</el-dropdown-item
            >
            <el-dropdown-item
              @click="close_tab(2)"
              :style="{ color: close_status.close_2 ? '' : '#999' }"
              ><svgBtn
                icon="tabs_close_2"
                :color="close_status.close_2 ? '#999' : '#999'"
                style="font-size: 14px; margin-right: 10px"
              ></svgBtn
              >关闭左侧标签页</el-dropdown-item
            >
            <el-dropdown-item
              @click="close_tab(3)"
              :style="{ color: close_status.close_3 ? '' : '#999' }"
              ><svgBtn
                icon="tabs_close_3"
                :color="close_status.close_3 ? '#999' : '#999'"
                style="font-size: 14px; margin-right: 10px"
              ></svgBtn
              >关闭右侧标签页</el-dropdown-item
            >
            <el-dropdown-item
              @click="close_tab(4)"
              :style="{ color: close_status.close_4 ? '' : '#999' }"
              ><svgBtn
                icon="tabs_close_4"
                :color="close_status.close_4 ? '#999' : '#999'"
                style="font-size: 14px; margin-right: 10px"
              ></svgBtn
              >关闭其他标签页</el-dropdown-item
            >
            <el-dropdown-item
              @click="close_tab(5)"
              :style="{ color: close_status.close_5 ? '' : '#999' }"
              ><svgBtn
                icon="tabs_close_5"
                :color="close_status.close_5 ? '#999' : '#999'"
                style="font-size: 14px; margin-right: 10px"
              ></svgBtn
              >关闭全部标签页</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <svgBtn
        style="
          font-size: 14px !important;
          padding: 5px;
          margin: 0 5px;
          border-radius: 3px;
          height: 14px;
          line-height: 14px;
        "
        :style="{
          backgroundColor: svg_color_list[2] == '#3580eb' ? '#ECF4FF' : '',
        }"
        :color="svg_color_list[2]"
        @mouseenter="svg_color_list[2] = '#3580eb'"
        @mouseleave="svg_color_list[2] = '#999'"
        :icon="is_all_page ? 'page_mini_2' : 'page_large_2'"
        @click="store.commit('change_all_page')"
      ></svgBtn>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
import svgBtn from '@/components/svg_button.vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import EventBus from '@/utils/EventBus'
const tab_close_src_1 = require('@/assets/img/tabs_close_1.png')
const tab_close_src_2 = require('@/assets/img/tabs_close_2.png')
const svg_color_list = ref(['#999', '#999', '#999'])
const store = useStore()
const router = useRouter()
const is_all_page = computed(() => {
  return store.state.is_all_page
})
const tabs_listValue = ref('index') // 第一个子页面   数据分析
const tabs_list = computed(() => {
  store.state.tabs_list.forEach((element) => {
    element.close_icon = tab_close_src_1
  })
  return store.state.tabs_list
})
// sheet页x轴滚动计算
const handleScroll = (e) => {
  // e.wheelDelta或者e.detail判断滚轮方向
  const delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
  // 控制左右滚动的距离
  e.currentTarget.scrollLeft -= delta * 100
  e.preventDefault
}
const close_status = ref({
  close_1: false,
  close_2: false,
  close_3: false,
  close_4: false,
  close_5: false,
})
watch(tabs_list.value, (a, b) => {
  console.log(tabs_list.value, a, b)
  close_status.value.close_1 = false
  close_status.value.close_2 = false
  close_status.value.close_3 = false
  close_status.value.close_4 = false
  close_status.value.close_5 = false

  if (tabs_list.value.length > 1) {
    close_status.value.close_1 = true
    close_status.value.close_5 = true
  }
  if (tabs_list.value.length > 2) {
    close_status.value.close_4 = true
  }
  setTimeout(() => {
    a.forEach((e, index) => {
      console.log(e)
      if (e.is_active) {
        tabs_listValue.value = e.name
        if (index > 1) {
          close_status.value.close_2 = true
        }
        if (index < tabs_list.value.length - 1) {
          close_status.value.close_3 = true
        }
      }
    })
  })
})
const show_tabs = computed(() => {
  return store.state.hidden_tabs
})
const close_tab = (e) => {
  if (e == 1) {
    if (!close_status.value.close_1) {
      return
    }
    tabs_list.value.some((item) => {
      if (item.is_active) {
        removeTab(item.name)
      }
    })
  } else if (e == 2) {
    if (!close_status.value.close_2) {
      return
    }
    tabs_list.value.some((item, index) => {
      if (item.is_active) {
        store.commit('remove_tabs_list', {
          index: 1,
          length: index - 1,
          close_self: false,
        })
        EventBus.emit('remove_tabs', { index: 1, length: index - 1 })
      }
    })
  } else if (e == 3) {
    if (!close_status.value.close_3) {
      return
    }
    tabs_list.value.some((item, index) => {
      if (item.is_active) {
        store.commit('remove_tabs_list', {
          index: index + 1,
          length: tabs_list.value.length - 1 - index,
          close_self: false,
        })
        EventBus.emit('remove_tabs', {
          index: index + 1,
          length: tabs_list.value.length - 1 - index,
        })
      }
    })
  } else if (e == 4) {
    if (!close_status.value.close_4) {
      return
    }
    tabs_list.value.some((item, index) => {
      if (item.is_active) {
        store.commit('remove_tabs_list', {
          index: 1,
          length: index - 1,
          close_self: false,
        })
        store.commit('remove_tabs_list', {
          index: index + 1,
          length: tabs_list.value.length - 1 - index,
        })
        EventBus.emit('remove_tabs', {
          index: index + 1,
          length: tabs_list.value.length - 1 - index,
        })
        EventBus.emit('remove_tabs', { index: 1, length: index - 1 })
      }
    })
  } else {
    if (!close_status.value.close_5) {
      return
    }
    store.commit('remove_tabs_list', {
      index: 1,
      length: tabs_list.value.length - 1,
      close_self: true,
    })
    router.push({ name: 'index' })
    EventBus.emit('menu_value', { index: 0, type: 2 })
    EventBus.emit('remove_tabs', {
      index: 1,
      length: tabs_list.value.length - 1,
    })
  }
}
const removeTab = async (e) => {
  console.log(e)
  if (tabs_list.value.length == 1) {
    return
  }
  await remove_first(e)
  tabs_list.value.some((item, index) => {
    if (item.name == e) {
      console.log(tabs_list.value, index)
      store.commit('remove_tabs_list', {
        index: index,
        length: 1,
        close_self: true,
      })
      EventBus.emit('remove_tabs', { index: index, length: 1 })
    }
  })
}
const remove_first = (e) => {
  tabs_list.value.some((item, index) => {
    if (item.name == e) {
      if (item.is_active) {
        router.push({ name: tabs_list.value[index - 1].name })
        // EventBus.emit('change_default_active', tabs_list.value[index - 1].path)
        EventBus.emit('menu_value', {
          index: index - 1,
          type: 2,
        })
        EventBus.emit('remove_tabs', { index: index, length: 1 })
      }
    }
  })
}
const selectTabs = (e) => {
  console.log(e)
  tabs_listValue.value = e.name
  router.push({ name: e.name })
  tabs_list.value.forEach((item, index) => {
    if (item.name == e.name) {
      console.log(index)
      EventBus.emit('menu_value', { index: index, type: 2 })
    }
  })
}
const change_tab_close_icon = (e) => {
  e.type == 1
    ? (tabs_list.value[e.index].close_icon = tab_close_src_2)
    : (tabs_list.value[e.index].close_icon = tab_close_src_1)
}
</script>

<style lang="scss" scoped>
.tab_item {
  display: flex;
  align-items: center;
}
.tab_item:hover {
  color: #3580eb;
}
.choose_tab {
  background-color: #f0f2f5;
  font-weight: bold;
  color: #3580eb;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
  border: none;
}
:deep(.el-dropdown-menu__item) {
  padding: 0 0 0 14px !important;
}
:deep(.el-tabs__item) {
  font-size: 12px;
}
:deep(.el-tabs .el-tabs__item:first-child .is-icon-close) {
  display: none;
}
:deep(.el-tabs--card > .el-tabs__header) {
  border: none;
}
</style>
